<template>
	<view class="container">
		<image src="@/static/index1.png" class="bgPic" mode="widthFix"></image>
		<view class="mainBox">
			<view class="title1">TOP行业报告</view>
			<input class="input1" type="text" v-model="keywords" maxlength="20" placeholder="请输入关键字搜索" @confirm="getListFn" />
			<swiper class="swiper" circular :indicator-dots="false" autoplay>
				<swiper-item v-for="(item,value) in bannerList" :key="value">
					<image :src="item.imgUrl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<scroll-view class="container-top" scroll-x>
			  <view v-for="(item,value) in categoryList" :key="value" class="trade-tabBar" :class="{'trade-active': item.id == categoryId}" @click="checkoutTrade(item)">
			    {{ item.categoryName }}
			  </view>
			</scroll-view>
			<view class="mainBoxItem" v-for="(item,value) in list" :key="value" @click="toDetailFn(item)">
				<image :src="require('@/static/type'+item.type+'.png')" class="itempic" mode="widthFix"></image>
				<view class="itemRightBox">
					<view class="reportTit">
						{{item.title}}
						<text :style="item.type==0?'background: #E7EFFF;color: #2563EB;':item.type==1?'background: #FFF6DF;color: #FFC53E;':item.type==2?'background: #DFFDF1;color: #0DC77A;':item.type==3?'background: #F1ECFF;color: #845CF8;':'background: #FFDCDB;color: #F15651;'">{{item.type==0?'一次性报告':item.type==1?'日报':item.type==2?'周报':item.type==3?'月报':'其他'}}</text>
					</view>
					<view class="timeBox">
						<image src="@/static/watch.png" mode="widthFix"></image>
						<view class="numBox">{{item.lookNum}}</view>
						<image src="@/static/down.png" mode="widthFix"></image>
						<view class="numBox">{{item.downloadNum}}</view>
						<view class="time">{{item.updateTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				categoryId:0,
				keywords:'',
				bannerList:[],
				categoryList:[],
			}
		},
		onLoad(e) {
			
		},
		onShow() {
			this.initFn()
		},
		methods: {
			initFn(){
				this.$http('/api/category/list').then(res=>{
					this.categoryList = [{id:0,categoryName:'全部'},...res.result]
				})
				this.$http('/api/report/list',{pageNo:1,pageSize:999}).then(res=>{
					this.list = res.result.records
				})
				this.$http('/api/shufflingFigure/list',{pageNo:1,pageSize:999}).then(res=>{
					this.bannerList = res.result
				})
			},
			getListFn(){
				this.$http('/api/report/list',{pageNo:1,pageSize:999,categoryId:this.categoryId?this.categoryId:undefined,title:this.keywords?this.keywords:undefined}).then(res=>{
					this.list = res.result.records
				})
			},
			checkoutTrade(item){
				this.categoryId = item.id
				this.getListFn()
			},
			toDetailFn(item){
				if(item.type==0){
					uni.navigateTo({
						url:'/pages/space/detail?id='+item.id
					})
				}else {
					uni.navigateTo({
						url:'/pages/space/reportList?id='+item.id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		padding: 32rpx;
		.bgPic {
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			z-index: 0;
			height: 0;
		}
		.mainBox {
			position: relative;
			z-index: 1;
			.title1 {
				font-size: 36rpx;
				color: #252E37;
				padding-top: 50rpx;
				margin-bottom: 40rpx;
			}
			.input1 {
				width: 690rpx;
				height: 78rpx;
				background: #FFFFFF;
				border-radius: 104rpx;
				text-align: center;
				font-size: 28rpx;
				color: #6B7280;
				margin-bottom: 28rpx;
			}
			.swiper {
				width: 680rpx;
				height: 340rpx;
				margin-bottom: 20rpx;
				image {
					width: 680rpx;
					height: 340rpx;
				}
			}
			.container-top {
				width: 100%;
				white-space: nowrap;
				height: 62rpx;
				margin-bottom: 20rpx;
				// scroll-view 默认不能用 flex，这里写在内部
				.trade-tabBar {
					display: inline-block;
					font-size: 28rpx;
					color: #1F2937;
					padding: 0 40rpx;
					line-height: 62rpx;
					position: relative;
					white-space: nowrap;
					text-align: center;
					height: 62rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-right: 20rpx;
					&.trade-active {
						background: #2563EB;
						color: #FFFFFF;
					}
				}
			}
			
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				color: transparent;
			}
			
			.mainBoxItem {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 28rpx;
				margin-bottom: 16rpx;
				display: flex;
				.itempic {
					width: 120rpx;
					min-width: 120rpx;
					height: 0;
					margin-right: 28rpx;
				}
				.itemRightBox {
					width: 100%;
					padding-top: 10rpx;
					.reportTit {
						font-size: 28rpx;
						color: #1F2937;
						font-weight: bold;
						margin-bottom: 56rpx;
						line-height: 28rpx;
						min-height: 56rpx;
						text {
							font-size: 16rpx;
							padding: 4rpx 10rpx;
							font-weight: normal;
							border-radius: 6rpx;
							margin-left: 16rpx;
						}
					}
					.timeBox {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-size: 24rpx;
						color: #9CA3AF;
						image {
							width: 26rpx;
							height: 0;
						}
						.numBox {
							margin: 0 26rpx 0 10rpx;
						}
						.time {
							margin-left: auto;
						}
					}
				}
			}
		}
	}
</style>
